<template>
  <div class="leixin-wrap">
    <div class="leixin-box">
      <div class="leixin-box-one box-ones">
        <span>类型</span>
        <ul class="leixin-box-one-li">
          <li v-for="(item, index) in lx" :class="{ active: num1 == index }" @click="tabs1(index,item.a1)">
            {{item.a1}}
          </li>
        </ul>
      </div>
      <div class="leixin-box-one">
        <span>区域</span>
        <ul class="leixin-box-one-li">
          <li v-for="(item, index) in qy" :class="{ active: num2 == index }" @click="tabs2(index,item.a2)">
            {{item.a2}}
          </li>
        </ul>
      </div>
      <div class="leixin-box-one">
        <span>年代</span>
        <ul class="leixin-box-one-li">
          <li
            v-for="(item, index) in nn"
            :class="{ active: num3 == index }"
            @click="tabs3(index,item.a3)"
          >
            {{item.a3}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leixing",
  data() {
    return {
        //   三个类型选择器
        num1:0,
        num2:0,
        num3:0,
        lx:[
          {"a1":"全部"},{"a1":"武侠"},{"a1":"古装"},{"a1":"动作"},{"a1":"传记"},
          {"a1":"剧情"},{"a1":"短片"},{"a1":"战争"},{"a1":"家庭"},{"a1":"犯罪"},
          {"a1":"科幻"},{"a1":"运动"},{"a1":"嫌疑"},{"a1":"纪录片"},{"a1":"历史"},
          {"a1":"奇幻"},{"a1":"恐怖"},{"a1":"惊悚"},{"a1":"爱情"},{"a1":"冒险"},{"a1":"其他"}
        ],
        qy:[
          {"a2":"全部"},{"a2":"大陆"},{"a2":"英国"},{"a2":"韩国"},{"a2":"法国"},
          {"a2":"泰国"},{"a2":"澳大利亚"},{"a2":"印度"},{"a2":"中国香港"},{"a2":"伊朗"},
          {"a2":"美国"},{"a2":"俄罗斯"},{"a2":"中国台湾"},{"a2":"日本"},{"a2":"其他"},
        ],
        nn:[
          {"a3":"全部"},{"a3":"2021"},{"a3":"2020"},{"a3":"2019"},{"a3":"2018"},{"a3":"2017"},
          {"a3":"2016"},{"a3":"2015"},{"a3":"2014"},{"a3":"2013"},{"a3":"2012"},{"a3":"2011"},
          {"a3":"2010"},{"a3":"2009"},{"a3":"2008"},{"a3":"2007"},{"a3":"2006"},{"a3":"2005"}
        ]
    };
  },
  methods: {
    //   三个类型选择器
      tabs1(index,a1){
          // console.log(a1);
          this.num1 = index
          this.$store.commit('Mnum1',a1)
      },
       tabs2(index,a2){
          // console.log(a2);
          this.num2 = index
          this.$store.commit('Mnum2',a2)
      },
       tabs3(index,a3){
          // console.log(a3);
          this.num3 = index
          this.$store.commit('Mnum3',a3)

      }
  },
  computed:{
    Hotindedx(){
      return this.$store.state.HotIndexs
    }
  },
  watch:{
    // 如果按照时间或者默认排序有变动，就让三大类型回到初始值
    Hotindedx(val){
      console.log();
      if(val.HotIndexsing!==''){
        this.num1 = 0;
        this.num2 = 0;
        this.num3 = 0;
      }
    }
  }
 
};
</script>

<style lang="scss" scoped>
.leixin-wrap {
  width: 100%;
  height: 230px;
  margin-top: 40px;
  .leixin-box {
    padding: 0 20px;
    width: 1080px;
    height: 230px;
    border: 1px solid rgb(196, 190, 190);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .box-ones {
      border: none !important;
    }
    .leixin-box-one {
      display: flex;
      align-items: center;
      border-top: 1px solid rgb(221, 218, 218);
      span {
        color: #ed4036;
      }
      .leixin-box-one-li {
        box-sizing: border-box !important;
        margin: 0 20px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        li {
          padding: 8px 16px;
        }
      }
    }
  }
}
.active {
  background: #ed4036;
  border-radius: 10px;
  color: #fff;
}
</style>
